<%
if(config.ssl&&config.ssl.port&&data.protocol==='https'){
    data.port=config.ssl.port
}else{
    data.port=config.port
}
if(!data.port||data.port===''||data.port==80||data.port==443){data.url=baseUrl}else{data.url=baseUrl+':'+data.port}
if(data.addon && data.addon.indexOf('relative')>-1){
    data.url=''
}
%>
<script>
var data = <%- JSON.stringify(data) %>
if(!data.group || data.group === ''){
    data.group = '$'
}
</script>
<link rel="stylesheet" href="<%=data.url%>/assets/vendor/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="<%=data.url%>/libs/css/bootstrap.min.css">
<link rel="stylesheet" href="<%=data.url%>/libs/css/gridstack.min.css">
<link rel="stylesheet" href="<%=data.url%>/libs/css/gridstack-extra.min.css">
<style>
    .grid-stack-item{
        border:1px solid #333;
    }
    .grid-stack-item-content-overlay{
        z-index:2;
    }
    .grid-stack-item-content-overlay,.grid-stack-item iframe{
        margin:0;width:100%;height:100%;position:absolute;top:0;left:0;border:0;
    }
</style>

<script src="<%=data.url%>/libs/js/jquery.min.js"></script>
<script src="<%=data.url%>/libs/js/jquery-ui.min.js"></script>
<script src="<%=data.url%>/libs/js/bootstrap.min.js"></script>
<script src="<%=data.url%>/libs/js/lodash.min.js"></script>
<script src="<%=data.url%>/libs/js/gridstack.min.js"></script>
<script src="<%=data.url%>/libs/js/gridstack.jQueryUI.min.js"></script>
<div class="grid-stack"></div>
<script type="text/javascript">
    $.grid = {};
    $.grid.op=function(r,rr,rrr){
        if(!rrr){rrr={};};if(typeof rrr === 'string'){rrr={n:rrr}};if(!rrr.n){rrr.n='ShinobiOptions_'+location.host}
        ii={o:localStorage.getItem(rrr.n)};try{ii.o=JSON.parse(ii.o)}catch(e){ii.o={}}
        if(!ii.o){ii.o={}}
        if(r&&rr&&!rrr.x){
            ii.o[r]=rr;
        }
        switch(rrr.x){
            case 0:
                delete(ii.o[r])
            break;
            case 1:
                delete(ii.o[r][rr])
            break;
        }
        localStorage.setItem(rrr.n,JSON.stringify(ii.o))
        return ii.o
    }
    $(function () {
        //init grid
        var gridTag = '.grid-stack';
        var gridEl = $(gridTag);
        var options = {
            cellHeight: 80,
            verticalMargin: 0,
        };
        //monitor="watch_off"
        gridEl.gridstack(options);
        gridEl.on('change', function (event, ui) {
            var savedGrids = $.grid.op().savedGrids;
            if(!savedGrids)savedGrids = {};
            savedGrids[data.group] = {};
            gridEl.find('.grid-stack-item').each(function(n,v){
                var el = $(v);
                var mid = el.attr('mid')
                savedGrids[data.group][mid] = {
                    mid:mid,
                    x:el.attr('data-gs-x'),
                    y:el.attr('data-gs-y'),
                    width:el.attr('data-gs-width'),
                    height:el.attr('data-gs-height')
                };
            })
            $.grid.op('savedGrids',savedGrids)
        });

        //draw grid items
        var gridX = 0;
        var gridY = 0;
        var itemW = 4;
        var itemH = 4;
        var savedGrids = $.grid.op().savedGrids;
        if(!savedGrids)savedGrids = {};
        if(!savedGrids[data.group])savedGrids[data.group] = {};
        var grid = gridEl.data('gridstack');
        $.each(<%- JSON.stringify(monitors) %>,function(n,monitor){
            var x = gridX;
            var y = gridY;
            var width = itemW;
            var height = itemH;
            var autoPlacement = true;
            var saved = savedGrids[data.group][monitor.mid];
            if(saved){
                x = saved.x;
                y = saved.y;
                width = saved.width;
                height = saved.height;
                autoPlacement = false;
            }
            var tmp = '<div auth="'+data.auth+'" ke="'+data.ke+'" mid="'+monitor.mid+'" class="grid-stack-item"><div class="grid-stack-item-content"><div class="grid-stack-item-content-overlay"><a monitor="watch_off"><i class="fa fa-times-circle"></i></a></div><iframe src="'+data.url+'/'+data.auth+'/embed/'+monitor.ke+'/'+monitor.mid+`/fullscreen|jquery|relative?host=${location.pathname}"></iframe></div></div>`
            grid.addWidget($(tmp), x, y, width, height, autoPlacement);
        })
    });
</script>
